<template>
  <div class="container">
    <!-- 区域设置 -->
    <!-- 系统设置-册号维护 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox" size="medium">
      <el-form-item label="册号名称：">
        <el-input v-model="search.volumeName" placeholder="请输入册号名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="抄表员：">
        <el-select v-model="search.meterReaderID" placeholder="请选择抄表员" filterable clearable>
          <el-option v-for="(item,index) in meterReaderList" :key="index" :label="item.name"
            :value="item.suid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="tablePagination.current=1;getVolume()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="addVolumeVisible = true;isAddVolume=true;clearFormInfo()">
          新增</el-button>
      </el-form-item>
    </el-form>
    <!-- /查询条件 -->
    <PagesTable :tableHeader="tableHeader" :tableData="tableData" :tableOperation="tableOperation"
      :tablePagination="tablePagination" @pageSize="pageSizeChange" @currentPage="currentPageChange"
      @pageOperation="handlePageOperation" />

    <!-- 新增修改  册号 -->
    <el-dialog :title="isAddVolume?'添加册号':'修改册号'" :visible.sync="addVolumeVisible" width="500px">
      <el-form :model="volumeForm" label-width="95px" class="sanfan-form">
        <el-form-item label="册号名称" class="must">
          <el-input v-model="volumeForm.volumeName"></el-input>
        </el-form-item>
        <el-form-item label="抄表员" class="must">
          <el-select v-model="volumeForm.meterReaderID" placeholder="请选择抄表员" filterable>
          <el-option v-for="(item,index) in meterReaderList" :key="index" :label="item.name"
            :value="item.suid">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="volumeForm.volumeMk" type="textarea" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVolumeVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVolume">确 定</el-button>
      </div>
    </el-dialog>
    <!-- /新增修改  册号 -->
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        activeName: "one",
        search: {
          volumeName: "",
          meterReaderID:""
        },
        tableHeader: [{
            name: "序号",
            mark: "index",
            minWidth: "50"
          },
          {
            name: "册号编号",
            mark: "volumeID",
            minWidth: "90"
          }, {
            name: "册号名称",
            mark: "volumeName",
            minWidth: "90"
          },
          {
            name: "抄表员",
            mark: "name",
            minWidth: "90"
          },
          {
            name: "备注",
            mark: "volumeMk",
            minWidth: "90"
          },
          {
            name: "创建时间",
            mark: "volumeCreateTime",
            minWidth: "90"
          },
          {
            name: "操作",
            mark: "",
            minWidth: "90"
          },
        ],
        tableOperation: [{
            name: "编辑",
            mark: "edit",
            icon: true
          },
          {
            name: "删除",
            mark: "delete",
            icon: true
          },
        ],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 1
        },
        tableData: [],
        tableDataAll: [],
        tableDataSearch: [],
        isAddVolume: true,
        addVolumeVisible: false,
        volumeForm: {
          volumeName: "",
          meterReaderID: "",
          volumeMk:""
        },
        meterReaderList: [{
          meterReaderID: "",
          name: "全部"
        }],
        //other
      }
    },
    async mounted() {
      // await this.getMeterReader();
      // this.getData()
    },
    beforeDestroy() {},
    created() {},
    methods: {
      getData() {
        // this.getMeterReader()
        this.getVolume()
      },
      handleTableData() {
        const self = this;
        self.tableData = [];
        let i = (self.tablePagination.current - 1) * self.tablePagination.size;
        let j = self.tablePagination.current * self.tablePagination.size;
        if (j > self.tablePagination.total) {
          j = self.tablePagination.total;
        }
        for (i; i < j; i++) {
          self.tableData.push(self.tableDataSearch[i]);
        }
      },
      pageSizeChange(data) {
        this.tablePagination.size = data;
        this.handleTableData();
      },
      currentPageChange(data) {
        this.tablePagination.current = data;
        this.handleTableData();
      },
      handlePageOperation(row, mark) {
        const self = this;
        if (mark == "edit") {
          self.addVolumeVisible = true;
          self.isAddVolume = false;

          //给表单赋值......
          self.volumeForm.volumeID = row.volumeID
          self.volumeForm.volumeName = row.volumeName
          self.volumeForm.volumePeopleNum = row.volumePeopleNum
          self.volumeForm.meterReaderID = row.suid
          // var ids_s=row.meterReaderID.split(",");
          // var ids=[]
          // ids_s.forEach(element => {
          //   ids.push(Number(element));
          // });
          // self.volumeForm_meterReader=ids
          // self.volumeForm_meterReader=row.meterReaderID
        } else if (mark == "delete") {
          this.$confirm('确定要删除此记录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delectCommunityById(row.volumeID);
          }).catch(() => {});
        }
      },
      delectCommunityById(id) { //删除册号
        const self = this;
        var param = {
          volumeID: id
        };
        self.$axios.post("/service/bsVolumeDel", param).then(res => {
          if (res.data.status === "success") {
            self.$message(res.data.res);
            self.getVolume();
          } else {
            self.$message(res.data.res);
          }
        });
      },
      addVolume() { // 添加册号
        const self = this;
        if (!self.volumeForm.volumeName ||
          // !self.volumeForm.volumeMk ||
          !self.volumeForm.meterReaderID
        ) {
          self.$message.error("标星号为必填！");
          return false
        }
        var param = {
          volumeName: self.volumeForm.volumeName,
          suid: self.volumeForm.meterReaderID,
          volumeMk: self.volumeForm.volumeMk,
        };

        if (self.isAddVolume) {
          //新增
          self.$axios.post("/service/bsVolumeAdd", param).then(res => {
            if (res.data.status === "success") {
              self.$message.success(res.data.res);
              self.getVolume();
              self.addVolumeVisible = false
            } else {
              self.$message.error(res.data.res);
            }
          });
        } else {
          // 修改
          param.volumeID = self.volumeForm.volumeID
          self.$axios.post("/service/bsVolumeMod", param).then(res => {
            if (res.data.status === "success") {
              self.$message.success(res.data.res);
              self.getVolume();
              self.addVolumeVisible = false
            } else {
              self.$message.error(res.data.res);
            }
          });
        }
      },
      getVolume() { //获取所有册号
        const self = this;
        var param = {
          volumeName: self.search.volumeName,
          suid:self.search.meterReaderID,
          // pageNum: self.tablePagination.current, //页码
          // pageSize: self.tablePagination.size, //条数
        }

        self.$axios.post("/service/bsVolumeGet", param).then(res => {
          if (res.data.status === "success") {
            var tmp = res.data.res
            tmp.forEach((element, index) => {
              element.index = index + self.tablePagination.size * self.tablePagination.current - self
                .tablePagination.size + 1
            });
            self.tableDataAll = tmp;
            self.tableDataSearch = self.tableDataAll;
            self.tablePagination.total = tmp.length
            self.handleTableData();
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      clearFormInfo() { //新增时清空表单
        this.volumeForm = {
          volumeName: "",
          volumePeopleNum: "",
          createTime: "",
        }
      },
      async getMeterReader() { //抄表员
        const self = this;
        var param = {
          rid: 3
        }
        self.$axios.post("/service/bsSysuserInfoGet", param).then(res => {
          if (res.data.status === "success") {
            self.meterReaderList = res.data.res
          } else {
            self.$message(res.data.res);
          }
        });
      },
    }
  }
</script>
<style lang="scss" scoped>

</style>